<template>
  <div class="faqs-home">
    <div class="header"><span @click="comeBack" class="goBack">
      <van-icon name="arrow-left"/></span>
<!--      商家入驻-->
      {{ $t('h.A038') }}
    </div>
    <div class="safe"/>
    <div class="faqs-header">
      <div class="faqs-logo">
        <img class="logo" :src="logo" alt="">
        <span class="down-load">
<!--              <el-popover-->
<!--                  placement="bottom"-->
<!--                  trigger="click">-->
<!--                  <div class="country">-->
<!--                    <div class="item">-->
<!--                       <img src="@/assets/image/zh.png" alt="">-->
<!--                        <span>Chinese</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <img slot="reference" src="@/assets/image/zh.png" alt="">-->
<!--              </el-popover>-->
        </span>
      </div>
      <div class="faqs-text">
<!--        商家入驻-->
        {{ $t('h.A038') }}
<!--        我们的合作伙伴计划为您提供全方位的营销支持和服务-->
        <p>{{$t('h.A069')}}</p>
<!--        现在就加入我们吧！让我们一起创造更大的商业机会，共同成长!-->
        <p> {{$t('h.A070')}} </p>
      </div>
    </div>
    <div class="shop-info" v-if="!loading">
      <div class="shop-join-in">
<!--        商业信息-->
        <div class="title">{{ $t('h.A071') }}</div>
        <div class="form">
          <el-form size="middle" :model="ruleForm" :rules="rules" label-width="375" ref="ruleForm"
                   class="demo-ruleForm">
            <el-form-item prop="avatar">
              <template slot="label">
<!--                店铺标志-->
                <span class="box-title">{{ $t('h.A072') }}</span>
              </template>
              <div class="box-input">
                <input type="text">
                <van-uploader v-model="idImage" multiple :max-count="1" :before-read="beforeRead">
                  <div class="input">
                    <i class="el-icon-camera-solid"></i>
                  </div>
                </van-uploader>
              </div>
            </el-form-item>
            <el-form-item style="margin-top: -20px" prop="title">
              <template slot="label">
<!--                店铺名称-->
                <span class="box-title">{{ $t('h.A073') }}</span>
              </template>
              <div class="box-input">
<!--                请输入店铺名称-->
                <el-input v-model="ruleForm.title" :placeholder="$t('h.A074')"></el-input>
              </div>
            </el-form-item>
<!--            <el-form-item style="margin-top: -20px" required prop="name">-->
<!--              <template slot="label">-->
<!--                <span class="box-title">国家</span>-->
<!--              </template>-->
<!--              <div class="box-input">-->
<!--                <input type="text">-->
<!--                <el-select style="width: 100%;" v-model="value" placeholder="请选择国家">-->
<!--                  <el-option-->
<!--                      v-for="item in options"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </div>-->
<!--            </el-form-item>-->
            <el-form-item style="margin-top: -20px" prop="cardnum">
              <template slot="label">
<!--                证件/护照号码-->
                <span class="box-title">{{  $t('h.A075') }}</span>
              </template>
              <div class="box-input">
<!--                证件/护照号码-->
                <el-input v-model="ruleForm.cardnum" :placeholder=" $t('h.A075')"></el-input>
              </div>
            </el-form-item>
            <el-form-item style="margin-top: -20px" prop="fullname">
              <template slot="label">
<!--                真实姓名-->
                <span class="box-title">{{  $t('h.A076') }}</span>
              </template>
              <div class="box-input">
<!--                请输入真实姓名-->
                <el-input v-model="ruleForm.fullname" :placeholder=" $t('h.A077')"></el-input>
              </div>
            </el-form-item>
<!--            <el-form-item style="margin-top: -20px" prop="name">-->
<!--              <template slot="label">-->
<!--                <span class="box-title">whatsAPP</span>-->
<!--              </template>-->
<!--              <div class="box-input">-->
<!--                <el-input placeholder="请输入账号" v-model="inputs" class="input-with-select">-->
<!--                  <div slot="prepend" @click="chekckCountry">-->
<!--                    <span>+44</span>-->
<!--                    <van-icon name="arrow-down"/>-->
<!--                  </div>-->
<!--                </el-input>-->
<!--              </div>-->
<!--            </el-form-item>-->
            <el-form-item style="margin-top: -20px" prop="cardpic">
              <template slot="label">
<!--                证件照/上传护照-->
                <span class="box-title">{{  $t('h.A078') }}</span>
              </template>
              <div class="box-input" style="display: flex;justify-content: space-around">
                <van-uploader v-model="idImage1" multiple :max-count="1" :before-read="beforeRead1">
                  <div class="input">
                    <i class="el-icon-camera-solid"></i>
                  </div>
<!--                  证件正面-->
                  <p class="upload-text">{{  $t('h.A079') }}</p>
                </van-uploader>
                <van-uploader v-model="idImage2" multiple :max-count="1" :before-read="beforeRead2">
                  <div class="input">
                    <i class="el-icon-camera-solid"></i>
                  </div>
<!--                  证件反面-->
                  <p class="upload-text">{{  $t('h.A080') }}</p>
                </van-uploader>
                <van-uploader v-model="idImage3" multiple :max-count="1" :before-read="beforeRead3">
                  <div class="input">
                    <i class="el-icon-camera-solid"></i>
                  </div>
<!--                  手持证件照-->
                  <p class="upload-text">{{  $t('h.A081') }}</p>
                </van-uploader>
              </div>
            </el-form-item>
            <el-form-item style="margin-top: -20px">
              <template slot="label">
<!--                证件照/上传护照-->
                <span class="box-title">{{  $t('h.A078') }}</span>
              </template>
              <div class="box-input" style="display: flex;justify-content: space-around">
                <img src="@/assets/image/p1.png" alt="">
                <img src="@/assets/image/p2.png" alt="">
                <img src="@/assets/image/p3.png" alt="">
              </div>
            </el-form-item>
            <el-form-item style="margin-top: -20px;" prop="code" v-if="!$route.query?.auto">
              <template slot="label">
<!--                邀请码-->
                <span class="box-title">{{  $t('h.A082') }}</span>
              </template>
              <div class="box-input">
<!--                邀请码-->
                <el-input v-model="ruleForm.code" :placeholder=" $t('h.A082')"></el-input>
              </div>
            </el-form-item>
            <!--            <el-form-item>-->
            <!--              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>-->
            <!--              <el-button @click="resetForm('ruleForm')">重置</el-button>-->
            <!--            </el-form-item>-->
          </el-form>
        </div>

      </div>
    </div>
    <div class="submit">
      <p>
<!--        我已经阅读并同意-->
        <van-checkbox style="margin-right: 10px" icon-size="15px" @change="changeCheckBox" v-model="checked" checked-color="#f89220"/>
        {{  $t('h.A083') }} <a href="javascript:void (0)">
<!--        入驻协议-->
        {{ $t('h.A084') }}</a>
      </p>
      <p class="btn"><a @click="submitForm('ruleForm')"  href="javascript:void (0)">
<!--        提交申请表-->
        {{  $t('h.A085') }}</a></p>
    </div>
    <div class="safe"/>

    <van-popup closeable round v-model="openCountry" position="bottom" :style="{ height: '80%' }">
      <div class="content-main">
        <div class="title">选择区域码</div>
        <div class="input">
          <div class="input-label">
            <img src="@/assets/image/search-b.png" alt="">
            <input type="text" placeholder="请输入要搜索的国家名称">
          </div>
          <div class="country-list">
            <div class="item">
                <span class="left">
                  <img src="@/assets/image/zh.png" alt="">
                  <span>中国</span>
                </span>
              <span class="right">+86</span>
            </div>
            <div class="item">
                <span class="left">
                  <img src="@/assets/image/zh.png" alt="">
                  <span>中国</span>
                </span>
              <span class="right">+86</span>
            </div>
            <div class="item">
                <span class="left">
                  <img src="@/assets/image/zh.png" alt="">
                  <span>中国</span>
                </span>
              <span class="right">+86</span>
            </div>
            <div class="item">
                <span class="left">
                  <img src="@/assets/image/zh.png" alt="">
                  <span>中国</span>
                </span>
              <span class="right">+86</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="protocolDisplay" lock-scroll position="bottom" round closeable>
      <div class="rotocol-main">
        <div class="information">
<!--          经营合同-->
          <p class="title">{{  $t('h.A086') }}</p>
          <p class="content">{{Obtain.title}}：</p>
          <div class="protocol-content">
            <span v-html="Obtain.protocol"></span>
            <div class="bottom">
              <img :src="Obtain.agreement_icon" alt="">
              <p class="footer">
                <!--              甲方-->
                {{ $t('h.A091') }}：{{ Obtain.party_a }} <br><br>
                <!--              日期-->
                {{ $t('h.A093') }}：{{ parseTime(new Date()).slice(0,10) }}
              </p>
              <p class="footer">
                <!--              乙方-->
                {{ $t('h.A092') }}：<img class="sign" :src="signCanvasVal" alt=""><br><br>
                <!--              日期-->
                {{ $t('h.A093') }}：{{ parseTime(new Date()).slice(0,10) }}
              </p>
            </div>
          </div>
          <div class="bottom-submit">
<!--            同意并签名-->
            <a href="javascript:void (0)" @click="signName=true">{{ $t('h.A090') }}</a>
<!--            确 定-->
            <a href="javascript:void (0)" @click="closePorp">{{ $t('h.A089') }}</a>
          </div>
        </div>

        <van-popup v-model="signName" round>
            <div class="sign-main">
              <div class="image">
                <sign-canvas
                    class="sign-canvas"
                    ref="signCanvasRef"
                    :options="optionsSign"
                    v-model="signCanvasVal"
                />
              </div>
              <div class="button">
<!--                上一步-->
                <van-button style="height: 40px" @click="handleClear" type="warning">{{ $t('h.A087') }}</van-button>
<!--                上一步-->
                <van-button style="height: 40px" @click="signName=false" type="warning">{{ $t('h.A088') }}</van-button>
<!--                确 定-->
                <van-button  style="height: 40px" @click="signName=false" :disabled="!signCanvasVal" type="danger">{{ $t('h.A089') }}</van-button>
              </div>
            </div>
        </van-popup>

      </div>
    </van-popup>
  </div>
</template>

<script>
import {accountAvatarUpload, getMerchantInfo, getUserInfo, merchantSettlement, obtainProtocol} from '@/api/apiFox';
import {parseTime} from "@/plugins/parseTime";
import {Toast} from "vant";
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      loading:false,
      openCountry: false,
      checked: false,
      protocolDisplay: false,
      logo:'',
      signName:false,
      signCanvasVal:'',//签名的返回值
      Obtain:{title:'',agreement_icon:'',merchant:'',p:'',party_a:'',protocol:''},
      optionsSign: {
        isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
        lineJoin: "bevel", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 390, //canvas宽高 [Number] 可选
        canvasHeight: 250, //高度  [Number] 可选
        isShowBorder: true, //是否显示边框 [可选]
        bgColor: "#fff", //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#fff", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: "#101010", // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },
      idImage:[],
      idImage1:[],
      idImage2:[],
      idImage3:[],
      ruleForm: {
        avatar: '',
        title: '',
        cardnum: '',
        fullname: '',
        cardpic: '',
        code: ''
      },
      options: [
          {
        value: '0',
        label: '美国'
      }, {
        value: '1',
        label: '法国'
      }, {
        value: '2',
        label: '德国'
      }, {
        value: '3',
        label: '英国'
      }],
      rules: {
        avatar: [
          {required: true, message: this.$t('h.A072'), trigger: 'blur'},
        ],
        title: [
          {required: true, message:this.$t('h.A074'), trigger: 'change'}
        ],
        cardnum: [
          { required: true, message: this.$t('h.A075'), trigger: 'change'}
        ],
        fullname: [
          {required: true, message:this.$t('h.A077'), trigger: 'change'}
        ],
        cardpic: [
          {required: true,message:this.$t('h.A078'), trigger: 'change'}
        ],
        code: [
          {required: true,message:this.$t('h.A082'), trigger: 'change'}
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    parseTime,
    changeCheckBox(){
      this.protocolDisplay=true

    },
    closePorp(){
      this.protocolDisplay=false
      if (this.signCanvasVal){
        this.checked=true
        this.protocolDisplay=false
      }else {
        this.protocolDisplay=false
       // setTimeout(()=>{
       //   this.checked=false
       // },600)
      }
    },
    comeBack() {
      // this.$router.push('/mine')
      this.$router.push('/know').catch(err=>{})
    },
    handleClear() {
      this.$refs.signCanvasRef.canvasClear();
    },
    chekckCountry() {
      this.openCountry = true
    },
    submitForm(formName){
      // this.$router.push('/success')
      let s = []
      this.idImage1.length>0 ? s.push(this.idImage1[0].url)  : ''
      this.idImage2.length>0 ? s.push(this.idImage2[0].url)  : ''
      this.idImage3.length>0 ? s.push(this.idImage3[0].url)  : ''
      this.ruleForm.cardpic=s.toString()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.signCanvasVal || this.checked){
            merchantSettlement(this.ruleForm).then(res=>{
              Toast.success(this.$t('h.A095'))
              this.$router.push({
                path:'/success',
                query:{
                  status:0,
                  msg:this.$t('h.A128')
                }
              })
            }).catch(err=>{
              Toast(err.msg)
            })
          }else {
            Toast(this.$t('h.A094'))
          }
        } else {
          return false;
        }
      })
    },

    beforeRead(file){
      accountAvatarUpload({file:file}).then(res=>{
        this.idImage=[{url:res.fullurl,isImage: true }]
        this.ruleForm.avatar=res.fullurl
      }).catch(err=>{
        console.log(err,'上传error');
        return;
      })
    },
    beforeRead1(file){
      accountAvatarUpload({file:file}).then(res=>{
        this.idImage1=[{url:res.fullurl,isImage: true }]
      }).catch(err=>{})
    },
    beforeRead2(file){
      accountAvatarUpload({file:file}).then(res=>{
        this.idImage2=[{url:res.fullurl,isImage: true }]
      }).catch(err=>{})
    },
    beforeRead3(file){
      accountAvatarUpload({file:file}).then(res=>{
        this.idImage3=[{url:res.fullurl,isImage: true }]
      }).catch(err=>{})
    },

    getInsertShopDoc(){
      obtainProtocol().then(res=>{
        this.Obtain=res
      }).catch(err=>{})
    },
    setFormData(){
      Toast.loading({
        mask:true
      })
      this.loading = true;
      getMerchantInfo().then(async res => {
        this.$delete(this.rules,'code')
        const shopInfo = res.data.shop_info;
        this.ruleForm.title = shopInfo.title;
        this.ruleForm.cardnum = shopInfo.cardnum;
        this.ruleForm.fullname = shopInfo.fullname;
        this.idImage1 =[ {
          url:shopInfo.cardpic[0]
        }];
        this.idImage2 = [ {
          url:shopInfo.cardpic[1]
        }];
        this.idImage3 = [ {
          url:shopInfo.cardpic[2]
        }];
        this.loading = false;
      })
    },

  },
  mounted() {
    this.logo=this.$store.state.website.logo
    this.getInsertShopDoc()
    if(this.$route.query?.auto){
      this.setFormData();
    }
  }
}
</script>

<style scoped lang="scss">
.faqs-home {
  width: 100%;
  box-sizing: border-box;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    height: 45px;
    width: 100%;
    text-align: center;
    line-height: 45px;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 16px;

    .goBack {
      position: absolute;
      left: 10px;
    }
  }

  .safe {
    width: 100%;
    height: 45px;
  }

  .faqs-header {
    width: 100%;
    height: 300px;
    background: url("../../assets/image/faqs-bgk.png") no-repeat 50% 50%;
    background-position: top center;
    padding: 3%;
    box-sizing: border-box;

    .faqs-image {
      position: absolute;
      width: 100%;
      height: 300px;
      z-index: 0;
      top: 0;
      right: 0;
      object-fit: cover;
    }

    .faqs-logo {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .logo {
        height: 35px;
      }

      .down-load {
        font-size: 12px;
        color: #fff;

        img {
          margin-right: 5px;
          height: 25px;
        }

      }
    }

    .faqs-text {
      margin-top: 50px;
      width: 100%;
      font-size: 14px;
      color: #f89220;

      p {
        margin-top: 10px;
        font-size: 12px;
        color: #a6a6a6;
        width: 60%;
      }
    }
  }

  .shop-info {
    width: 100%;
    padding: 6%;
    box-sizing: border-box;

    .shop-join-in {
      width: 100%;
      min-height: 500px;

      .title {
        font-size: 24px;
        color: #333;
        font-weight: 700;
      }

      .title-login {
        width: 100%;
        font-size: 12px;
        color: #333333;
        margin: 10px 0;

        a {
          color: #f89220;
        }
      }

      .form {
        width: 100%;
      }
    }
  }

  .submit {
    width: 100%;
    height: 100px;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    border-top: 1px solid #f6f6f6;

    p:nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #333;
      height: 20px;

      a {
        color: #f89220;
      }
    }

    .btn {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: center;

      a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        height: 40px;
        min-width: 100px;
        background: #f89220;
        color: #fff;
        font-size: 14px;
      }
    }
  }

  .box-title {
    font-size: 12px;
    width: 100%;
  }

  .box-input {
    width: 100%;
    margin-top: 2px;
    padding: 0 50px 0 0;
    box-sizing: border-box;

    img {
      margin-right: 10px;
    }

    .input {
      text-align: center;
      line-height: 70px;
      width: 70px;
      background: #f6f6f6;
      height: 70px;
      font-size: 30px;
      color: #aaa;
    }

    .upload-text {
      font-size: 12px;
      color: #333;
    }

    .box-input-left {
      width: 60px;
      height: 100%;
      font-size: 14px;

      span {
        margin-right: 10px;
      }
    }
  }

  .content-main {
    width: 100%;

    .title {
      width: 100%;
      text-align: center;
      line-height: 50px;
      font-size: 14px;
    }

    .input {
      width: 100%;
      height: 30px;
      padding: 0 10px;
      box-sizing: border-box;

      .input-label {
        width: 100%;
        height: 30px;
        background: #f6f6f6;
        display: flex;
        align-items: center;
        padding: 0 3%;
        box-sizing: border-box;
        font-size: 12px;

        img {
          margin-right: 10px;
          height: 14px;
        }
      }

      .country-list {
        width: 100%;
        padding: 0 3%;
        box-sizing: border-box;
        margin-top: 30px;

        .item {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 15px;

          .left {
            color: #333333;
            font-size: 12px;
            display: flex;
            align-items: center;

            img {
              margin-right: 10px;
              height: 18px;
            }
          }

          .right {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }

  .rotocol-main {
    min-height: 200px;
    background: none;
    padding: 3%;
    box-sizing: border-box;
    width: 350px;
    background: #fff;
    font-size: 12px;
    .information{
      width: 100%;
      min-height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
      .title{
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .content{
        font-size: 12px;
        margin-top: 10px;
      }
      .bottom{
        width: 100%;
        height: 120px;
        position: relative;
        display: flex;
        margin-bottom: 60px;
        img{
          height: 60px;
          position: absolute;
          left: 40%;
          top: 10px;
        }
        .footer{
          z-index: 999;
          margin: 20px 15px;
          font-size: 12px;
        }
      }

      .bottom-submit{
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;

        z-index: 1000;
        background: #fff;
        overflow: hidden;
        box-sizing: border-box;
        margin-left: -20px;
        a{
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px 18px;
          color: #fff;
          font-size: 14px;
          background: #f89220;
          margin-left: 10px;
          border-radius: 8px;
        }
      }
    }
  .information::-webkit-scrollbar{
    display: none;
   }
  }
}

.sign-main{
  min-height: 400px;
  width: 350px;
  .image{
    width: 100%;
    min-height: 250px;
  }
  .button{
    width: 100%;
    height: 70px;
    border-top: 1px solid #f6f6f6;
    display: flex;
    justify-content: space-between;
    padding: 10px 3%;
    box-sizing: border-box;
  }
}

::-webkit-scrollbar{
  width: 0;
}
.protocol-content{
  height: 450px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
